<template>
	<view style="padding-bottom: 50rpx;">
		<page-head :title="'教练直约'" :headtype="2"></page-head>
		<view class="jlitem marginAuto flex">
			<view class="jlitemimg" @click="apifun.maxphotofun(apifun.URLimg+datas.avatar)">
				<image v-if="datas.avatar" :src="apifun.URLimg+datas.avatar" mode="aspectFill"></image>
				<image v-if="!datas.avatar" src="@/static/logo.png" mode="aspectFill"></image>
			</view>
			<view class="jlitemmsg">
				<view class="jlitemm-name flex">
					<view class="jlitemm-namem">{{ datas.username }}</view>
				</view>
				<view class="jlitemmb">
					<view class="jlq">已服务次数：{{ datas.service_num }}</view>
					<view class="jlq">评分：{{ datas.score }}分</view>
				</view>
				<view class="jlitemmdoc">
					<text>{{ datas.brand }}/</text>
					<text>{{ datas.type }}/</text>
					<text>{{ datas.shape }}</text>
				</view>
				<!-- <view class="jlitemmdoc">
					<text>{{ datas.mileage }}/</text>
					<text>{{ datas.shap }}/</text>
					<text>{{ datas.cc }}</text>
				</view> -->
				<view class="jlitemmdoc">
					<text style="margin-right:40rpx;">年龄：{{ datas.age }}岁</text>
					<text>驾龄：{{ datas.drive_age }}年</text>
				</view>
				<view class="jlitemmdoc">
					<text style="margin-right:40rpx;">简介：{{ datas.intro }}</text>
				</view>
				<view class="jlitemmdoc">
					<text style="margin-right:40rpx;">车牌：{{ datas.cart_number }}</text>
				</view>
				<view class="site flex" style="margin-top: 20rpx;">
					<!-- <uv-icon name="map" size="18" color="#1686F8"></uv-icon> -->
					<view class="mainColor" style="font-size:24rpx;line-height: 40rpx;">教练位置：{{ datas.address }}</view>
				</view>
			</view>
		</view>
		<!-- <view class="cartitle marginAuto">车辆信息</view>
		<view class="carmsg marginAuto">
			<view class="carpai">豫A123456</view>
			<view class="cartype flex">
				<view>品牌：{{ datas.brand }}</view>
				<view>档位：{{ datas.gears }}</view>
				<view>动力类型：{{ datas.type }}</view>
			</view>
			<view class="cartype flex">
				<view>车型：{{ datas.shap }}</view>
				<view>里程：{{ datas.mileage }}</view>
				<view>排量：{{ datas.cc }}</view>
			</view>
			<view class="carphoto flex">
				<view class="carphotoeach" v-for="(item,index) in cartimg" :key="index">
					<image :src="apifun.URLimg+item" mode=""></image>
				</view>
			</view>
		</view> -->
		<view class="grade marginAuto flex" @click="apifun.navigate('/pages/accompany/evaluatelist','jlid='+jlid)">
			<view class="gradetxt">
				<text style="font-size:32rpx;color: #222222;">综合评分:{{ xing }}</text>
				<text style="font-size:24rpx;color:#999999;">（{{ datas.eval_num }}人评分）</text>
			</view>
			<view class="gradetxtxing flex ">
				<uv-icon class="gradetxtxingeach" :name="xing >= 1 ? 'star-fill':'star'" size="22" color="#EB6302"></uv-icon>
				<uv-icon class="gradetxtxingeach" :name="xing >= 2 ? 'star-fill':'star'" size="22" color="#EB6302"></uv-icon>
				<uv-icon class="gradetxtxingeach" :name="xing >= 3 ? 'star-fill':'star'" size="22" color="#EB6302"></uv-icon>
				<uv-icon class="gradetxtxingeach" :name="xing >= 4 ? 'star-fill':'star'" size="22" color="#EB6302"></uv-icon>
				<uv-icon class="gradetxtxingeach" :name="xing >= 5 ? 'star-fill':'star'" size="22" color="#EB6302"></uv-icon>
			</view>
			<view class="gradetxticon">
				<uv-icon name="arrow-right" size="20" color="#999999"></uv-icon>
			</view>
		</view>
		<view class="marginAuto" style="width:600rpx;margin-top:60rpx;">
			<uv-button text="预约" @click="apifun.navigate('/pages/my/mydriveryy','jlid='+jlid+'&mealid='+mealid)" :customStyle="{
				'background':'#1686F8',
				'color':'#ffffff',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'100rpx'
			}"></uv-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				jlid:'',
				mealid:'',  // 套餐id
				datas:{},
				cartimg:[],
				xing:0
			};
		},
		onLoad(option) {
			this.jlid = option.jlid || '';
			this.mealid = option.mealid || '';
			this.initData()
		},
		methods: {
			initData(){
				let snedData = {
					id:this.jlid
				};
				this.apifun.unirequest('/api/partnerDrive/getPartnerDetail','post',snedData,(res)=>{
					console.log(res)
					if(res.code === 200){
						let datas = res.data;
						this.datas = datas;
						this.xing = parseInt(datas.score);
						this.cartimg = datas.cart_img;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.jlitem{
		position: relative;
		margin-top: 20rpx;
		width:690rpx;
		padding:10rpx 0;
		background: #fff;
		border-radius: 10rpx;
		background: linear-gradient(to top right,#ffffff 60%,#BEDEFF);
		.jlitemimg{
			width:250rpx;
			height:250rpx;
			image{
				width:250rpx;
				height:250rpx;
				border-radius:6rpx;
			}
		}
		.jlitemmsg{
			margin-left:10rpx;
			width: 80%;
			.jlitemm-name{
				margin: 10rpx 0;
				.jlitemm-namem{
					color: #222222;
					font-size: 40rpx;
					line-height:60rpx;
					margin-right: 10rpx;
					font-weight: 600;
				}
			}
			.jlitemmb{
				.jlq{
					display: inline-block;
					padding:0 10rpx;
					background:#FFEFE4;
					color:#FF720C;
					font-size:20rpx;
					border-radius:6rpx;
					height:40rpx;
					line-height:40rpx;
					margin-right: 10rpx;
				}
			}
			.jlitemmdoc{
				color:#666666;
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}
	}
	.cartitle{
		width: 690rpx;
		padding: 10rpx 0;
		font-size: 34rpx;
		color: #222222;
		line-height: 60rpx;
		font-weight: 600;
	}
	.carmsg{
		width: 630rpx;
		padding:30rpx;
		background: #fff;
		border-radius: 20rpx;
		.carpai{
			display: inline-block;
			padding:0 20rpx;
			background:linear-gradient(to bottom,#555555,#000000);
			color:#F9D6B0;
			font-size:30rpx;
			border-radius:6rpx;
			height:70rpx;
			line-height:70rpx;
			margin-right: 10rpx;
		}
		.cartype{
			padding:20rpx 0;
			justify-content: space-between;
			color:#333333;
			font-size: 26rpx;
			// border-bottom: 1px solid #D8D8D8;
		}
		.carphoto{
			justify-content: space-around;
			flex-wrap: wrap;
			.carphotoeach{
				width: 200rpx;
				height: 200rpx;
				margin-top: 20rpx;
				image{
					width: 200rpx;
					height: 200rpx;
					border-radius:10rpx;
				}
			}
		}
	}
	.grade{
		width: 630rpx;
		padding: 30rpx;
		background: #fff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		justify-content: space-between;
		.gradetxtxingeach{
			margin: 0 2rpx;
		}
	}
</style>